<template>
  <page-loading :show="pageLoading">
    <view class="wrap">
      <car-info-header :carInfo="carInfo"></car-info-header>
      <view class="bg-f6"></view>
      <view class="check">
        <view class="title">检查项目</view>
        <view class="check-item bb-2">
          <view class="flex">
            <view
              class="name flex flex-ai-c"
              :class="{ active: progress > 6 || progress < 2 }"
              @click="gotoPage(6)"
            >
              <text class="number">1</text>
              <text>驾驶舱</text>
            </view>
            <view
              class="name flex flex-ai-c"
              :class="{ active: progress > 7 || progress < 2 }"
              @click="gotoPage(7)"
            >
              <text class="number">2</text>
              <text>发动机舱</text>
            </view>
            <view
              class="name flex flex-ai-c"
              :class="{ active: progress > 8 || progress < 2 }"
              @click="gotoPage(8)"
            >
              <text class="number">3</text>
              <text>底盘</text>
            </view>
          </view>
          <view v-if="checkResult.length">
            <view class="result-title">检查结果：</view>
            <view
              v-for="(item, index) in checkResult"
              :key="index"
              class="result"
            >
              {{ resultArr[item.type] }}：已检查{{ item.inspected }}项，未检查{{
                item.notInspect
              }}项，异常{{ item.abnormal }}项
            </view>
          </view>
        </view>
      </view>
      <view class="check">
        <view class="title">其他检查项</view>
        <view class="check-item bb-2">
          <view v-if="manuallyList.length" class="">
            <view
              class="tag-item"
              v-for="(item, index) in manuallyList"
              :key="index"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="manually plus flex flex-ai-c" @click="gotoPage(9)">
            <i-icon
              icon="icontianjia"
              type="single"
              size="44rpx"
              color="#999"
            ></i-icon>
            <view style="padding-left: 20rpx">手动新建检查项</view>
          </view>
        </view>
      </view>
      <view class="check">
        <view class="title">签字确认</view>
        <view class="check-item flex">
          <view
            class="name flex flex-ai-c"
            :class="{ active: progress === 0 }"
            @click="gotoPage(1)"
          >
            <text class="number">4</text>
            <text>技师签字</text>
          </view>
          <view class="name flex flex-ai-c" @click="gotoPage(10)">
            <text class="number">5</text>
            <text>客户确认</text>
          </view>
        </view>
      </view>

      <!-- 弹框提示 -->
      <u-popup
        v-model="tipShow"
        mode="center"
        :mask="true"
        width="540"
        border-radius="10"
      >
        <view class="popup-content">
          <view class="title">温馨提示</view>
          <view class="content">
            {{ popupText }}
          </view>
          <view class="btn-box">
            <button class="btn-primary" @click="okey()">我知道了</button>
          </view>
        </view>
      </u-popup>
    </view></page-loading
  >
</template>
<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader'

export default {
  data() {
    return {
      tipShow: false,
      urlList: [
        '',
        '/pages_afterSales/signature/signature',
        '',
        '',
        '',
        '',
        '/pages_afterSales/dismantleCheck/dismantleCheckCockpit',
        '/pages_afterSales/dismantleCheck/dismantleCheckEngine',
        '/pages_afterSales/dismantleCheck/dismantleCheckChassis',
        '/pages_afterSales/dismantleCheck/addCheckManually',
      ],
      url: '',
      id: '', //订单id
      progress: 6, //当前操作步骤 0报告详情，1技师签字，2 外观，3内饰，4仪表盘，5其它检测，6驾驶舱，7发动机舱，8底盘
      name: '',
      manuallyList: [], //手动检查项目
      popupText: '',
      checkResult: [], //检查结果
      resultArr: ['驾驶舱', '发动机舱', '底盘'],
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },
    toastStr() {
      let str = ''
      // (0报告详情，1技师签字，2 外观，3内饰，4仪表盘，5其它检测，6驾驶舱，7发动机舱，8底盘)
      switch (this.progress) {
        case 1:
          str = '请先确认技师已签字'
          break
        case 6:
          str = '请先确认驾驶舱已检查完成'
          break
        case 7:
          str = '请先确认发动机舱已检查完成'
          break
        case 8:
          str = '请先确认底盘已检查完成'
          break
        case 1:
          str = '请先确认底盘已检查完成'
          break
        default:
          str = '请按顺序操作'
          break
      }
      return str
    },
  },

  onLoad(e) {
    this.id = e.id
    this.name = e.name ? e.name : ''
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  onShow() {
    this.getProgress()
    this.getManually()
    this.getDismantCheck()
  },

  methods: {
    //上检进度
    getProgress() {
      this.$api.afterSales
        .getProgress({
          order_Arrive_Store_Id: this.id,
          type: 1,
        })
        .then((res) => {
          this.progress = res.data.detection_Progress
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //上检结果
    getDismantCheck() {
      this.$api.afterSales
        .getDismantCheck({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          if (res.data.length) {
            this.checkResult = res.data
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //获取手动检查
    getManually() {
      this.$api.afterSales
        .getManually({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          if (res.data.length) {
            this.manuallyList = [...res.data]
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //页面跳转
    gotoPage(i) {
      // (0报告详情，1技师签字，2 外观，3内饰，4仪表盘，5其它检测，6驾驶舱，7发动机舱，8底盘)
      if (this.progress === 0 && i !== 10) {
        return
      } else if (this.progress === 1) {
        if (i > 1 && i < 9) {
          this.showToast()
          return
        }
      } else if (
        this.progress > 1 &&
        this.progress < 9 &&
        i !== this.progress
      ) {
        if (i > this.progress || i === 1) {
          this.showToast()
          return
        } else {
          return
        }
      }
      if (i === 1 || i === 10) {
        this.$store.commit('afterSales/setSignData', {
          id: this.id,
          type: 1,
          figure: i === 1 ? 0 : 1,
          fnName: 'arrvialOrderSign',
        })
        const data = JSON.stringify({
          type: 'before', // before为回退页面， after为下一页
          count: i === 1 ? 1 : 3,
          fnName: 'arrvialOrderSign', //接口
        })
        if (i === 1) {
          uni.navigateTo({
            url:
              '/pages_afterSales/signature/signature?title=技师签字&typeOptions=' +
              data,
          })
        } else {
          uni.navigateTo({
            url:
              '/pages_afterSales/orderConfirm/customerConfirm?typeOptions=' +
              data,
          })
        }
      } else {
        this.url = this.urlList[i] + '?id=' + this.id + '&name=' + this.name
        if (i === 7 || i === 8) {
          if (i === 7) {
            this.popupText =
              '【空气滤清器】、【正时皮带检查】【火花塞】、【活塞顶部积碳】等，涉及到零部件拆装，检查前请务必和客户确认后再进行拆检！'
          } else {
            this.popupText =
              '底盘涉及到零部件拆装，检查前请务必和客户确认后再进行拆检！'
          }
          this.tipShow = true
        } else {
          uni.navigateTo({
            url: this.url,
          })
        }
      }
    },

    showToast() {
      uni.showToast({
        title: this.toastStr,
        icon: 'none',
      })
    },

    okey() {
      this.tipShow = false
      uni.navigateTo({
        url: this.url,
      })
    },
  },

  components: {
    carInfoHeader,
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  .bg-f6 {
    height: 20rpx;
    background: #f6f6f6;
  }

  .check {
    padding: 0 44rpx;

    .title {
      padding: 30rpx 0;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }

    .check-item {
      .name {
        width: 220rpx;
        height: 76rpx;
        background: #f6f6f6;
        border: 2rpx solid #f6f6f6;
        border-radius: 10px;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;

        &:nth-child(2) {
          margin: 0 20rpx;
        }

        .number {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40rpx;
          height: 40rpx;
          border: 2px solid #999;
          border-radius: 50%;
          margin: 0 20rpx 0 20rpx;
          color: #999;
        }

        .plus {
          margin: 0 20rpx;
        }
      }

      .manually {
        height: 76rpx;
        line-height: 76rpx;
        padding: 0 20rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        background: #f6f6f6;
        border: 2rpx solid #f6f6f6;
        border-radius: 10px;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }

      .tag-item {
        display: inline-block;
        height: 76rpx;
        line-height: 76rpx;
        padding: 0 20rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        background: #fffcef;
        border: 2rpx solid #fbb000;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #fbb000;
      }

      .plus {
        width: 320rpx;
      }

      .active {
        background: #fffcef;
        border-color: #fbd220;
        color: #fbb000;

        .number {
          color: #fbb000;
          border-color: #fbd220;
        }
      }

      .result-title {
        padding-top: 20rpx;
        font-size: 24rpx;
        color: #999;
      }

      .result {
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #eb5c02;
      }
    }

    .bb-2 {
      border-bottom: 2rpx solid #eee;
      padding-bottom: 30rpx;
    }
  }
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    // height: 88rpx;
    // background: #fdd421;
    .btn-primary {
      width: 450rpx;
      height: 78rpx;
      line-height: 78rpx;
      font-size: 30rpx;
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
</style>
